<template>
  <div class="het-panel">
    <h3 class="d-title">基础信息</h3>
    <ul class="flex base">
      <li>
        <span>任务名:</span>
        <div>{{ row?.taskName }}</div>
      </li>
      <li>
        <span>状态:</span>
        <div>{{ status }}</div>
      </li>
      <li v-if="status == '扫描中' || status == '扫描完成'">
        <span>进度:</span>
        <div style="width: 380px" v-if="status == '扫描中'">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="progress" />
        </div>
        <div style="width: 380px" v-if="status == '扫描完成'">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="100" />
        </div>
      </li>
    </ul>
  </div>
  <div class="het-panel" style="margin-top: 15px">
    <h3 class="d-title">扫描结果</h3>
    <HETTable ref="hetTable" :config="tableConfig"></HETTable>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
import { useRoute } from 'vue-router'
const route = useRoute()
const progress = ref(0)
const row = route.query
const status = ref('')
const hetTable = ref()
const tableConfig = ref({
  module: '',
  selectApi: params =>
    mAxios.get('vuln', {
      params: encodeURL(params)
    }),
  search: {
    form: {
      scanId: row?.id
    },
    config: []
  },
  columns: [
    {
      label: 'CVE',
      prop: 'cveId'
    },
    {
      label: '漏洞名称',
      prop: 'vulnName'
    },
    {
      label: '描述',
      prop: 'description'
    },
    // {
    //   label: "影响产品",
    //   prop: "affectedProduct",
    // },
    {
      label: '漏洞类型',
      prop: 'vulnType'
    },
    {
      label: '漏洞等级',
      prop: 'severity',
      formatter: row => {
        switch (row.severity) {
          case 'INFO':
            return '信息'
          case 'LOW':
            return '低危'
          case 'MEDIUM':
            return '中危'
          case 'HIGH':
            return '高危'
          default:
            return '严重'
        }
      }
    },
    {
      label: 'cvss评分',
      prop: 'baseScore'
    },
    {
      label: '参考',
      prop: 'reference'
    },
    {
      label: '发现时间',
      prop: 'publishTime'
    }
  ],
  controlBtns: []
})
const getProgress = () => {
  mAxios.get('vuln/scan/progress/' + row?.id).then(res => {
    if (res.data.data) {
      let p = Number(res.data.data)
      if (p >= 100) {
        clearInterval(timer.value)
        status.value = '扫描完成'
        setTimeout(() => hetTable.value.getTableData(), 2000)
      }
      progress.value = p
    } else {
      clearInterval(timer.value)
      status.value = '扫描完成'
      progress.value = 100
      setTimeout(() => hetTable.value.getTableData(), 2000)
    }
  })
}
const timer = ref(null)
onMounted(() => {
  status.value = row?.status
  if (status.value == '扫描中') {
    getProgress()
    timer.value = setInterval(() => {
      getProgress()
      // hetTable.value.getTableData()
    }, 5000)
  }
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
.d-title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
  margin-bottom: 15px;
}
.base {
  li {
    display: flex;
    align-items: center;
    margin-left: 20px;
    span {
      color: #6d6d6d;
    }
    div {
      margin-left: 10px;
    }
  }
}
</style>
